<h1>Présentation du fonctionnement de jQuery</h1>
		<h2>Introduction</h2>
		<ul>
			<li>
				<span>
				jQuery ne propose qu'une seule fonction
					<pre>
						<div>
$([paramètres])
						</div>
					</pre>
				<span class="important">Et c'est tout!</span>
				</span>
			</li>
			<li>
				<span>
				Voici la liste des différents paramètres que l'on peut lui passer:
				<br />
				- Mais alors pourquoi ne pas utiliser un simple appel: <span style="background-color: #a9a099; color: #d5edf9; padding: 1px;">window.onload = function(){}</span>
				<br />
				<i>&nbsp;&nbsp;Réponse: window.onload attend que la page et les éléments qu'elle contient soient complétement chargés, ce qui peut étre très long</i>
				<br />
				- Explication du processus jQuery
				<ol>
					<li>
						Le fichier HTML est chagé
					</li>
					<li>
						Il est lu par le navigateur
					</li>
					<li>
						La navigateur commence le téléchargement des fichiers externes <i>[images, css, ...]</i>
					</li>
					<li>
						<strong style="color: red;">Le code situé dans <span style="background-color: #a9a099; color: #d5edf9; padding: 1px;">$(function(){})</span> est exécuté dès que possible!</strong>
					</li>
					<li>
						<strong style="color: blue;">Lorsque tout est téléchargé && exécuté, le code situé <span style="background-color: #a9a099; color: #d5edf9; padding: 1px;">window.onload = function(){}</span> sera exécuté, EN DERNIER</strong>
					</li>
				</ol>
				</span>
			</li>
			<li>
				<span>
				Normalement les morceaux de JavaScript devraient même étre exécutés avant l'affichage, mais en pratique le navigateur peut commencer à afficher la page avant d'avoir tout téléchargé.
				<br />
				De plus les téléchargements ne se font pas forcément dans un ordre PROCEDURALE
				</span>
			</li>
			<li>
				<span>
				Voilà qui facilite le côté non-intrusif du JS:
				<br/>
				Si un élément ne doit apparaître qu'au survol de la souris, par exemple, il faut bien que cet élément soit visible lorsque Javascript n'est pas activé : il peut alors simplement être placé dans le code de la page, et dissimulé en Javascript au chargement, pour réapparaître au survol, en une animation à couper le souffle!
				</span>
			</li>
			<li>
				<span>
				On peut l'utiliser en stockant la fonction dans une variable pour la passer ensuite à jQuery :
				<br />
				<pre>
					<div>
var ma_fonction = function test(parametre_1)
{
	//Tout ce qui sera exécuté au chargement du DOM / your code here
}

$(ma_fonction);
					</div>
				</pre>
							Ou plus directement || simplement
				<pre>
					<div>
$(function test()
	{
		//Tout ce qui sera exécuté au chargement du DOM
	}
);
					</div>
				</pre>
				</span>
			</li>
		</ul>
		
		<h2>Un élément ou tableau d'éléments du DOM</h2>
		<ul>
			<li>
			<span>
				jQuery n'et pas qu'un super loader!
				<br />
				En lui passant des éléments du DOM, la fonction <span style="background-color: #a9a099; color: #d5edf9; padding: 2px;">$()</span> va nous renvoyer un objet jQuery qui va contenir les éléments qui lui ont été passés, et sur lesquels nous pourrons abuser de la puissance de <span class="important">jQuery</span> !!!
			</span>
			</li>
			<li>
			<span>
				Bien sure vous pourrez passer un élément ou un tableau d'éléments à jQuery.
			</span>
			</li>
			<li>
			<span>
				Il va sans dire que nous devrons placé ces éléments dans le <span class="important">loader jQuery</span>.
				<br />
				Exemple:
				<pre>
				<div>
var myHtmlElement = document.getElementById('test');

var myjQueryObject = $(myHtmlElement);
				</div>
				</pre>
			</span>
			</li>		
		</ul>
		<h2>Une chaîne de charactères</h2>
		<ul>
			<li>
			<span>
				En passant une chaine de charactères à la fonction <span style="background-color: #a9a099; color: #d5edf9; padding: 2px;">$();</span>, nous allons lui demander de nous retourner un objet jQuery rempli d'éléments sans même avoir à sélectionner préalablement un élément du DOM.
			</span>
			</li>
			<li>
			<span>
				Plusieurs possibilités vous permettront de sélectionner les éléments désirés : les sélecteurs CSS de niveaux 1 à 3, XPath, ainsi que quelques sélecteurs jQuery.
			</span>
			</li>
			<h3>Sélecteur CSS</h3>
			<ul>
				<li>
					<span>
						Prenons cette structure HTML:
						<br />
						exemple:
						<pre>
						<div>
&lt;div id="fixe"&gt;
	&lt;h2&gt;Je suis un titre, j'ai de l'importance.&lt;/h2&gt;
	&lt;p class="ique"&gt;Ca va les chevilles là-haut ?&lt;/p&gt;
	&lt;p&gt;Lorem ipsum sont des mots qui vont très bien ensemble,
	très bien ensemble.&lt;/p&gt;
&lt;/div&gt;
						</div>
						</pre>						
					</span>
				</li>
				<li>
					<span>
						Nous voulons sélectionner le premier élément &lt;p&gt;.
						<br />
						Voici différentes possibilités :
					</span>
				</li>
				<li>
					<span>
						<pre>
							<div>
// Sélection des éléments ayant pour classe "ique", dans l'élément ayant pour id "fixe"
var mon_objet_jQuery = $("#fixe .ique");      

// Sélection du premier élément &lt;p&gt; de l'élément &lt;div&gt;.
var mon_objet_jQuery = $("div p:first-child");      

// Sélection des éléments &lt;p&gt;, enfants directs d'un élement &lt;div&gt; et ayant pour classe "ique".
// Sélection des éléments &lt;p&gt;, enfants directs d'un élement &lt;div&gt; et ayant pour classe "ique".
var mon_objet_jQuery = $("div > p.ique");
							</div>
						</pre>
					</span>
				</li>
				<li>
					<span>
						Imaginez le cas suivant: vous souhaitez sélectionner tous les éléments p ayant pour classe "ique".
						<br />
						On peut alors utiliser la méthode:
						<span class="important">getElementsByTagName("p")</span>,
						<br />
						qui va nous retourner un tableau d'éléments p. Nous pourrons ensuite trier ce tableau à l'aide d'une boucle, pour ne garder que ceux ayant pour classe 'ique'. On imagine sans peine les quelques lignes nécessaires à une sélection pourtant triviale.
					</span>
				</li>
				<li>
					<span>
						Avec <span class="important">jQuery</span>, une ligne suffit: <span class="important">$("p.ique");</span>.
						C'est beau, c'est simple, et cette phrase a un parfum de slogan minable.
					</span>
				</li>
				<li>
					<span>
						Il est bien sÛr possible, comme en CSS, d'utiliser plusieurs sélecteurs à la fois :
							<pre>
								<div>
var mon_objet_jQuery = $("#fixe .ique, #fixe :last-child");
								</div>
							</pre>
					</span>
				</li>
			</ul>
		</ul>
		<h2>Les sélecteurs jQuery</h2>
		<ul>
			<li>
				<span>
					Il existe également une série de sélecteurs n'ayant aucun équivalent CSS ou XPath;
					<br />
					ces derniers peuvent se révéler trés pratiques comme dans les exemples suivants :
					<ol>
						<li>
							Sélection des éléments impairs
							<pre>
								<div>
$("div p:odd");								
								</div>
							</pre>
						</li>
						<li>
							Sélection des éléments inférieurs à (less than) 4 :
							<pre>
								<div>
$("div p:lt(4)");							
								</div>
							</pre>						
						</li>
						<li>
							Ou encore la sélection des éléments d'un formulaire (input, select, textarea, button) :
							<pre>
								<div>
$("div p:input");							
								</div>
							</pre>							
						</li>
						<li>
							<a href="http://docs.jQuery.com/DOM/Traversing/Selectors#Custom_Selectors" lang="en">Documentation des sélecteurs propres à jQuery</a>
						</li>						
					
					</ol>
				</span>
			</li>
		</ul>
	</div>